<%@ page import="java.util.Map" %>
<%@ page import="java.util.Set" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
    Map<String, String> stagePossibility = (Map<String, String>) application.getAttribute("stagePossibility");

    Set<String> keys = stagePossibility.keySet();
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">

    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <script src="jquery/jquery-1.11.1-min.js" type="text/javascript"></script>
    <script src="jquery/bootstrap_3.3.0/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="jquery/bs_typeahead/bootstrap3-typeahead.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        const stageJson = {
            <%
            for (String key : keys) {
                String value = stagePossibility.get(key);
            %>
            "<%=key%>": <%=value%>,
            <%
                }
            %>
        }
        $(function () {
            getUserList();

            // 客户名称自动补全
            $("#create-accountName").typeahead({
                source: function (query, process) {
                    $.post(
                        "workbench/transaction/getCustomerName.do",
                        {"name": query},
                        function (data) {
                            process(data);
                        },
                        "json"
                    );
                },
                delay: 1000
            });

            // 交易阶段绑定可能性
            $("#create-transactionStage").change(function () {
                let stage = $("#create-transactionStage").val();
                $("#create-possibility").val(stageJson[stage]);

            });

            // 创建交易
            $("#createTransBtn").click(function () {
                $("#transForm").submit();
            });

            $("#searchActivitySource").click(function () {
                searchActivity();
                $("#findMarketActivity").modal("show");
            });

            $("#searchContactsName").click(function () {
                searchContacts();
                $("#findContacts").modal("show");
            });

            // 为搜索市场活动的搜索框绑定事件，通过触发回车键，查询并展示搜索的市场活动
            $("#search-activityName").keydown(function (event) {
                // 如果是回车键
                if (event.keyCode === 13) {
                    searchActivity();
                    // 不触发的默认行为关闭
                    return false;
                }
            });

            // 为搜索联系人的搜索框绑定事件，通过触发回车键，查询并展示搜索的联系人
            $("#search-contactsName").keydown(function (event) {
                // 如果是回车键
                if (event.keyCode === 13) {
                    searchContacts();
                    // 不触发的默认行为关闭
                    return false;
                }
            });


            // 选择市场活动确认按钮
            $("#confirmBtn").click(function () {
                let $check = $("input[name=activity]:checked");
                let id = $check.val();
                let value = $("#" + id).html();
                $("#create-activitySrc").val(value);
                $("#activityId").val(id);
                $("#findMarketActivity").modal("hide");
            });

            // 选择联系人确认按钮
            $("#confirmBtn2").click(function () {
                let $check = $("input[name=contacts]:checked");
                let id = $check.val();
                let value = $("#" + id).html();
                $("#create-contactsName").val(value);
                $("#contactsId").val(id);
                $("#findContacts").modal("hide");
            });

        });

        // 联系人名称
        function searchContacts() {
            $.ajax({
                url: "workbench/transaction/getContactsByName.do",
                data: {
                    "fullname": $("#search-contactsName").val(),
                },
                type: "get",
                datatype: "json",
                success: function (data) {
                    let html = "";
                    let activityList = JSON.parse(data);
                    $.each(activityList, function (index, item) {
                        html += '<tr><td><input type="radio" name="contacts" value="' + item.id + '"/></td>';
                        html += '<td id="' + item.id + '">' + item.fullname + '</td>';
                        html += '<td>' + item.email + '</td>';
                        html += '<td>' + item.mphone + '</td></tr>';
                    });
                    $("#contactsBody").html(html);
                },
                error: function () {
                    globalAlert(alert_warning, "服务异常，获取列表失败");
                }
            });
        }

        // 市场活动源
        function searchActivity() {
            $.ajax({
                url: "workbench/transaction/getActivitiesByName.do",
                data: {
                    "name": $("#search-activityName").val()
                },
                type: "get",
                datatype: "json",
                success: function (data) {
                    let html = "";
                    let activityList = JSON.parse(data);
                    $.each(activityList, function (index, item) {
                        html += '<tr><td><input type="radio" name="activity" value="' + item.id + '"/></td>';
                        html += '<td id="' + item.id + '">' + item.name + '</td>';
                        html += '<td>' + item.startDate + '</td>';
                        html += '<td>' + item.endDate + '</td>';
                        html += '<td>' + item.owner + '</td></tr>';
                    });
                    $("#activityBody").html(html);
                },
                error: function () {
                    globalAlert(alert_warning, "服务异常，获取列表失败");
                }
            });
        }

        function getUserList() {
            let html = "<option disabled selected>-----请选择-----</option>"
            $.ajax({
                url: "settings/user/getUserList.do",
                type: "get",
                dataType: "json",
                success: function (data) {
                    /*遍历的每一个元素就是一个user*/
                    $.each(data, function (index, item) {
                        html += "<option>" + item.name + "</option>";
                        $("#createOwner").html(html);
                    });
                },
                error: function () {
                    html += "<option disabled>获取用户列表失败 </option>"
                }
            });
        }
    </script>

</head>
<body>

<!-- 查找市场活动 -->
<div class="modal fade" id="findMarketActivity" role="dialog">
    <div class="modal-dialog" role="document" style="width: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">查找市场活动</h4>
            </div>
            <div class="modal-body">
                <div class="btn-group" style="position: relative; top: 18%; left: 8px;">
                    <form class="form-inline" role="form">
                        <div class="form-group has-feedback">
                            <input class="form-control" placeholder="请输入市场活动名称，支持模糊查询" style="width: 300px;"
                                   type="text" id="search-activityName">
                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                        </div>
                    </form>
                </div>
                <table class="table table-hover" id="activityTable3"
                       style="width: 900px; position: relative;top: 10px;">
                    <thead>
                    <tr style="color: #B3B3B3;">
                        <td></td>
                        <td>名称</td>
                        <td>开始日期</td>
                        <td>结束日期</td>
                        <td>所有者</td>
                    </tr>
                    </thead>
                    <tbody id="activityBody">
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" id="confirmBtn">确认</button>
                <button class="btn btn-default" type="button" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- 查找联系人 -->
<div class="modal fade" id="findContacts" role="dialog">
    <div class="modal-dialog" role="document" style="width: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">查找联系人</h4>
            </div>
            <div class="modal-body">
                <div class="btn-group" style="position: relative; top: 18%; left: 8px;">
                    <form class="form-inline" role="form">
                        <div class="form-group has-feedback">
                            <input class="form-control" placeholder="请输入联系人名称，支持模糊查询" style="width: 300px;" type="text"
                                   id="search-contactsName">
                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                        </div>
                    </form>
                </div>
                <table class="table table-hover" id="activityTable" style="width: 900px; position: relative;top: 10px;">
                    <thead>
                    <tr style="color: #B3B3B3;">
                        <td></td>
                        <td>名称</td>
                        <td>邮箱</td>
                        <td>手机</td>
                    </tr>
                    </thead>
                    <tbody id="contactsBody">
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" id="confirmBtn2">确认</button>
                <button class="btn btn-default" type="button" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>


<div style="position:  relative; left: 30px;">
    <h3>创建交易</h3>
    <div style="position: relative; top: -40px; left: 70%;">
        <button class="btn btn-primary" type="button" id="createTransBtn">提交</button>
        <button class="btn btn-default" type="button" onclick="window.history.back();">取消</button>
    </div>
    <hr style="position: relative; top: -40px;">
</div>
<form class="form-horizontal" role="form" style="position: relative; top: -30px;" method="post" id="transForm"
      action="workbench/transaction/createTransaction.do">
    <div class="form-group">
        <label class="col-sm-2 control-label" for="createOwner">所有者<span
                style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="createOwner" name="owner">
            </select>
        </div>
        <label class="col-sm-2 control-label" for="create-amountOfMoney">金额</label>
        <div class="col-sm-10" style="width: 300px;">
            <input class="form-control" id="create-amountOfMoney" type="text" name="money">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label" for="create-transactionName">名称<span style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <input class="form-control" id="create-transactionName" type="text" name="name">
        </div>
        <label class="col-sm-2 control-label" for="create-expectedClosingDate">预计成交日期<span
                style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <input class="form-control" id="create-expectedClosingDate" type="date" name="expectedDate">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label" for="create-accountName">客户名称<span
                style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <input class="form-control" id="create-accountName" placeholder="支持自动补全，输入客户不存在则新建" type="text"
                   name="customerName">
        </div>
        <label class="col-sm-2 control-label" for="create-transactionStage">阶段<span
                style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="create-transactionStage" name="stage">
                <option disabled selected>-----请选择-----</option>
                <c:forEach items="${stage}" var="s">
                    <option value="${s.value}">${s.text}</option>
                </c:forEach>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label" for="create-transactionType">类型</label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="create-transactionType" name="type">
                <option disabled selected>-----请选择-----</option>
                <c:forEach items="${transactionType}" var="t">
                    <option value="${t.value}">${t.text}</option>
                </c:forEach>
            </select>
        </div>
        <label class="col-sm-2 control-label" for="create-possibility">可能性</label>
        <div class="col-sm-10" style="width: 300px;">
            <input class="form-control" id="create-possibility" type="text" name="possibility">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label" for="create-clueSource">来源</label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="create-clueSource" name="source">
                <option disabled selected>-----请选择-----</option>
                <c:forEach items="${source}" var="s">
                    <option value="${s.value}">${s.text}</option>
                </c:forEach>
            </select>
        </div>
        <label class="col-sm-2 control-label" for="create-activitySrc">市场活动源&nbsp;&nbsp;<a
                id="searchActivitySource" href="javascript:void(0);"><span
                class="glyphicon glyphicon-search"></span></a></label>
        <div class="col-sm-10" style="width: 300px;">
            <input class="form-control" id="create-activitySrc" type="text">
            <input hidden name="activityId" id="activityId">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label" for="create-contactsName">联系人名称&nbsp;&nbsp;<a id="searchContactsName"
                                                                                            href="javascript:void(0);">
            <span class="glyphicon glyphicon-search"></span></a></label>
        <div class="col-sm-10" style="width: 300px;">
            <input class="form-control" id="create-contactsName" type="text">
            <input hidden id="contactsId" name="contactsId">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label" for="create-describe">描述</label>
        <div class="col-sm-10" style="width: 70%;">
            <textarea class="form-control" id="create-describe" rows="3" style="resize: none;"
                      name="description"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label" for="create-contactSummary">联系纪要</label>
        <div class="col-sm-10" style="width: 70%;">
            <textarea class="form-control" id="create-contactSummary" rows="3" style="resize: none;"
                      name="contactsSummary"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label" for="create-nextContactTime">下次联系时间</label>
        <div class="col-sm-10" style="width: 300px;">
            <input class="form-control" id="create-nextContactTime" type="date" name="nextContactTime">
        </div>
    </div>

</form>
</body>
</html>